<template>
  <div>
    <div class="main-tab-content">
      <div class='fl main-tab-title'>
        <a href="http://blog.csdn.net/superbirds" title="热门推荐">热门推荐</a>
      </div>
      <ul class='fl'>
        <li><a href="http://blog.csdn.net/superbirds" title="华语">华语</a></li>
        <li><a href="http://blog.csdn.net/superbirds" title="流行">流行</a></li>
        <li><a href="http://blog.csdn.net/superbirds" title="摇滚">摇滚</a></li>
        <li><a href="http://blog.csdn.net/superbirds" title="民谣">民谣</a></li>
        <li><a href="http://blog.csdn.net/superbirds" title="电子">电子</a></li>
      </ul>
    </div>
    <ul class='recommend-body mt20'>
      <li class='fl' v-for='item in musicList' :key=item.id>
        <div class='wrap posi-rel disinblock cursor-pointer' @click="routerPlaylist(item.id)">
          <img  :src=item.picUrl alt="" class='song-sheet-img'>
          <a class='posi-ab disinblock playlist-wrap' :title=item.name @click.prevent='getPlayListDetail(item)'></a>
          <div class="bottom posi-ab">
            <!-- 耳机图标 -->
            <span class='headset fl'></span>
            <!-- 播放量 -->
            <span class='play-amount fl fs12'>{{ item.playCount | handlerPlayCount }}</span>
            <!-- 播放图标 -->
            <span class='icon-play fr'>
              <a href="" class='disinblock'></a>
            </span>
          </div>
        </div>
        <p>
          <a :title=item.name @click="routerPlaylist(item.id)">{{ item.name }}</a>
        </p>
      </li>
    </ul>
  </div>
</template>
<script>

export default {
  name: 'hotRecommended',
  data() {
    return {
      musicList: []
    }
  },
  mounted() {
    this._getHotRecommended()
  },
  methods: {
    async _getHotRecommended() {
      let res = await this.$api.getHotRecommended()
      this.musicList = res.data.result
    },
    async getPlayListDetail(data) {

      let param = {
        id: data.id
      }
      await this.$api.getPlayListDetail(param)
    },
    routerPlaylist(row){
      this.$router.push({path:'/playlist', query:{ id:row}})
    }
  }
}
</script>
<style lang='less' scoped>
@songSheetWidth: 140px;
@songSheetHeight: 140px;
  
  .recommend-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 1100px;
    height: 100%;
    li {
      flex:1;
      height: 235px;
      padding: 10px;
      .wrap {
        width: 140px;
        height: @songSheetHeight;
        .song-sheet-img, .playlist-wrap {
          width: 100%;
          height: 100%;
        }
        .playlist-wrap {
          top: 0;
          left: 0;
          background: url('../assets/coverall.png');
        }
        .bottom {
          height: 25px;
          background: rgba(0,0,0);
          opacity: 0.5;
          bottom: 0;
          width: 100%;
          .headset {
            width: 14px;
            height: 11px;
            margin: 7px 8px;
            background: url('../assets/iconall.png') 0 -24px;
          }
          .play-amount {
            color: #fff;
            font-weight: 400;
            line-height: 25px;
          }
          .icon-play {
            width: 16px;
            height: 16px;
            margin: 4px 8px;
            background: url('../assets/iconall.png') 0 0px;
            &:hover {
              background: url('../assets/iconall.png') 0 -60px;
            }
            a {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      p {
        width: @songSheetWidth;
        font-size: 14px;
      }
    }
  }
</style>